<template>
  <div class="wrapper">
    <transition
      enter-active-class="animate__animated animate__fadeInLeft animate__faster"
      leave-active-class="animate__animated animate__fadeOutRight animate__faster"
    >
      <div class="user" v-show="show">
        <div class="switch border-bottom">
          <div class="login" :class="{active:login}" @click="login=true">
            登录
          </div>
          <div class="reg" :class="{active:!login}" @click="login=false">
            注册
          </div>
        </div>
        <div class="form">
          <div class="username">
            账号：
            <input class="input" type="text" v-model="username" placeholder="请输入用户名" @blur="usernameCheck"/>
          </div>
          <div class="password">
            密码：
            <input class="input" type="password" v-model="password" placeholder="请输入密码" @blur="passwordCheck"/>
          </div>
          <transition
            enter-active-class="animate__animated animate__fadeIn animate__faster"
            leave-active-class="animate__animated animate__fadeOut animate__faster"
          >
            <div class="repeat" v-if="!login">
              确认：
              <input class="input" type="password" v-model="repeat" placeholder="请重新输入密码" @blur="repeatCheck"/>
            </div>
          </transition>
          <button class="btn" @click="userLogin" v-if="login">登录</button>
          <button class="btn" @click="userReg" v-else>注册</button>
        </div>
      </div>
    </transition>
    <div class="cover" v-show="show" @click="$emit('userbox')"></div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'Qs'
import { Toast } from 'mint-ui'
export default {
  name: 'User',
  props: {
    show: Boolean
  },
  components: {
  },
  data () {
    return {
      login: true,
      username: '',
      password: '',
      repeat: '',
      usernameLimit: /^\w{0,16}$/,
      passwordLimit: /^.{6,16}$/,
      usernameOk: true,
      passwordOk: true,
      repeatOk: true
    }
  },
  methods: {
    userLoginSucc (data) {
      this.$emit('userbox')
      this.$store.commit('changeUser', {
        username: this.username,
        userStatus: true,
        nickname: data.nickname,
        avatar: data.head_pic
      })
      Toast({
        message: '登陆成功',
        position: 'bottom',
        duration: 2000
      })
    },
    userLoginCheck (res) {
      res = res.data
      if (res.code === 200) this.userLoginSucc(res.data)
      else {
        Toast({
          message: res.data.error_msg,
          position: 'bottom',
          duration: 2000
        })
      }
    },
    inputCheck (login) {
      if (!this.username) {
        Toast({
          message: '请输入用户名！',
          position: 'bottom',
          duration: 5000
        })
        return false
      }
      if (!this.password) {
        Toast({
          message: '请输入密码！',
          position: 'bottom',
          duration: 2000
        })
        return false
      }
      if (!this.usernameOk) {
        Toast({
          message: '用户名只能用数字字母下划线，长度不超过16！',
          position: 'bottom',
          duration: 2000
        })
        return false
      }
      if (!this.passwordOk) {
        Toast({
          message: '密码必须为6-16位！',
          position: 'bottom',
          duration: 2000
        })
        return false
      }
      if (login) return true
      if (this.repeat !== this.password) {
        Toast({
          message: '两次输入密码不一致！',
          position: 'bottom',
          duration: 2000
        })
        return false
      }
      return true
    },
    userLogin () {
      if (!this.inputCheck(true)) return
      let data = {
        login_name: this.username,
        login_pwd: this.password
      }
      axios.post('/api/usr/login', qs.stringify(data)).then(this.userLoginCheck)
    },
    userRegSucc () {
      this.login = true
      Toast({
        message: '注册成功',
        position: 'bottom',
        duration: 2000
      })
    },
    userRegCheck (res) {
      res = res.data
      if (res.code === 200) this.userRegSucc()
      else {
        Toast({
          message: res.data.error_list[0],
          position: 'bottom',
          duration: 2000
        })
      }
    },
    userReg () {
      if (!this.inputCheck(false)) return
      axios.post('/api/usr/reg', qs.stringify({
        login_name: this.username,
        login_pwd: this.password,
        login_pwd2: this.repeat
      })).then(this.userRegCheck)
    },
    usernameCheck () {
      this.usernameOk = !!this.usernameLimit.exec(this.username)
    },
    passwordCheck () {
      this.passwordOk = !!this.passwordLimit.exec(this.password)
    },
    repeatCheck () {
      this.repeatOk = !!(this.repeat === this.password)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper
    .user
      position:fixed
      z-index: 2000
      width: 3rem
      height: 3rem
      top: 50%
      left: 50%
      margin-left: -1.5rem
      margin-top: -1.5rem
      box-sizing: border-box
      background: #ffffff
      border-radius: .5rem
      .switch
        height: .6rem
        box-sizing: border-box
        padding: 0 .3rem
        .login
          float:left
          height: .6rem
          line-height: .6rem
          width: 50%
          text-align:center
        .reg
          float:right
          height: .6rem
          line-height: .6rem
          width: 50%
          text-align:center
        .active
          color: red
      .form
        margin-top:.2rem
        width:100%
        height: 2.2rem
        position: relative
        .username
          width:100%
          text-align:center
          font-size: .25rem
          .inputError
            border: 2px red solid
        .password
          margin-top:.2rem
          width:100%
          text-align:center
          font-size: .25rem
          .inputError
            border: 2px red solid
        .repeat
          margin-top:.2rem
          width:100%
          text-align:center
          font-size: .25rem
          .inputError
            border: 2px red solid
        .input
          width: 1.5rem
          font-size: .2rem
        .btn
          position: absolute
          bottom: .3rem
          left: 0
          right: 0
          display: block
          margin: 0 auto
          text-align: center
          height: .5rem
          width: 1.2rem
          background: red
          border-radius: .1rem
          color: #fff
          font-weight:bold
    .cover
      position: fixed
      top: 0
      bottom: 0
      left: 0
      right: 0
      z-index: 999
      background: rgba(0,0,0,.5)
</style>
